<template>
  <div class="_p10 _flex _flex-around">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      v-model:page-size="pagination.limit"
      v-model:current-page="pagination.page"
    />
  </div>
</template>

<script>
export default {
  props: {
    total: {
      default: 0,
    },
  },
  data() {
    return {
      option: [10, 15, 20, 50, 100],
      pageSizeIndex: 0,
      pagination: {
        page: 1,
        limit: 18,
      },
    };
  },
  watch: {
    "pagination.page": {
      handler() {
        this.emit();
      },
    },
    "pagination.limit": {
      handler() {
        this.emit();
      },
    },
  },
  methods: {
    emit() {
      this.$emit("load", this.pagination);
    },
    pageInfo() {
      return this.pagination;
    },
    reset() {
      this.pagination = {
        page: 1,
        limit: 10,
      };
    },
  },
};
</script>

<style></style>
